<script lang="ts" setup>
  import { computed } from "vue";

  // import { computed } from "vue";

  interface ButtonProps {
    type?: "default" | "primary" | "text" | "danger";
    // outline?: boolean;
    // shape?: "round" | "circle" | "square";
    // customStyles?: any;
    full?: boolean;
    size?: "mini" | "small" | "middle" | "normal" | "large";
  }

  const props = withDefaults(defineProps<ButtonProps>(), {
    type: "default",
    // outline: false,
    full: false,
    size: "normal",
  });

  function getButtonSize() {
    switch (props.size) {
      case "mini":
        return "umi-button-mini";
      case "small":
        return "umi-button-small";
      case "middle":
        return "umi-button-middle";
      case "large":
        return "umi-button-large";
      default:
        return "umi-button-normal";
    }
  }

  function getButtonType() {
    switch (props.type) {
      case "default":
        return "umi-button-default";
      case "primary":
        return "umi-button-primary";
      case "danger":
        return "u-button-danger";
      case "text":
        return "u-button-text";
      default:
        return "";
    }
  }

  // const buttonOutline = computed(() => {
  //   return props.outline ? "u-button-outline" : "";
  // });

  // const buttonShape = computed(() => {
  //   switch (props.shape) {
  //     case "round":
  //       return "u-button-round";
  //     case "circle":
  //       return "u-button-circle";
  //     case "square":
  //       return "u-button-square";
  //     default:
  //       return "";
  //   }
  // });

  const getButtonFull = function () {
    if (props.full) {
      return "umi-button-full";
    }
    return "";
  };

  const classNames = computed(() => {
    return ["umi-button", getButtonType(), getButtonFull(), getButtonSize()];
  });
</script>

<template>
  <button :class="classNames">
    <slot></slot>
  </button>
</template>

<style lang="scss" scoped>
  .umi-button {
    cursor: pointer;
    border-radius: 4px;
    color: #333;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    padding: 6px 10px;
    text-align: center;

    &-normal {
      padding: 4px 10px;
    }

    &-mini {
      padding: 4px 6px;
      font-size: 12px;
      line-height: 12px;
    }

    &-small {
      padding: 4px 8px;
    }

    &-full {
      width: 100%;
    }

    &-default {
      border: 1px solid #f0f0f0;
      background: none;
    }

    &-primary {
      border: 1px solid var(--primary-color);
      background: var(--primary-color);
      color: white;
    }

    &-danger {
      border: 1px solid red;
      background: red;
      color: white;
    }

    &-outline {
      color: var(--primary-color);
      background: none;
      border: 1px solid var(--primary-color);
    }

    &-text {
      color: var(--primary-color);
      background: none;
    }

    &-round {
      border-radius: 20px;
    }

    &-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 100px;
    }

    &-square {
      border-radius: 4px;
    }
  }
</style>
